<template>
  <view class="group-area">
    <view class="group-title">
      <text>限时拼团</text>
      <view class="time-container">
        <text>距离结束还有</text>
        <text class="countdown">{{ countdown }}</text>
      </view>
    </view>
    <scroll-view class="group-list" scroll-x="true" show-scrollbar="false">
      <view class="scroll-content">
        <view class="group-item" v-for="(item, idx) in groupList" :key="idx" @click="goToProduct(item)">
          <image :src="item.img || item.logo || item.image" class="group-img" mode="aspectFill" />
          <text class="group-name">{{ item.name }}</text>
          <text class="group-price">￥{{ item.price }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import {useData} from "../../../common/useData";


const {modelData:groupList} = useData("/product/list", {size:10});
// 模拟数据


// 倒计时功能
const countdown = ref('00:38:10');
let timer = null;

const updateCountdown = () => {
  const parts = countdown.value.split(':');
  let hours = parseInt(parts[0]);
  let minutes = parseInt(parts[1]);
  let seconds = parseInt(parts[2]);
  
  seconds--;
  if (seconds < 0) {
    seconds = 59;
    minutes--;
    if (minutes < 0) {
      minutes = 59;
      hours--;
      if (hours < 0) {
        hours = 0;
        minutes = 0;
        seconds = 0;
        clearInterval(timer);
      }
    }
  }
  
  countdown.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
};

onMounted(() => {
  timer = setInterval(updateCountdown, 1000);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

const goToProduct = (item) => {
  uni.navigateTo({
    url: `/pages/index/product?id=${item.id}`
  });
};

</script>

<style scoped>
.group-area {
  width: 100%;
  padding: 0rpx;
  background-color: #ffffff;
  box-sizing: border-box;
}

.group-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  font-weight: bold;
  font-size: 36rpx;
}

.time-container {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666;
}

.countdown {
  font-size: 32rpx;
  color: #ff5722;
  margin-left: 10rpx;
}

.group-list {
  width: 100%;
  white-space: nowrap;
}

.scroll-content {
  display: inline-flex;
  width: max-content;
}

.group-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-right: 30rpx;
  width: 230rpx;
}

.group-img {
  width: 230rpx;
  height: 230rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
}

.group-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.group-price {
  font-size: 32rpx;
  color: #ff5722;
  font-weight: bold;
}
</style> 